<template>
	<view>
		<u-popup :show="show" overlayOpacity='0' closeIconPos="top-left" @close="hide">
			<view class="popup_content">
				<u-navbar title="耗课信息确认" bgColor="#ffffff" :titleStyle="{color:'#333'}" leftIconColor="#333"
					:autoBack="false" leftIconSize="40" @leftClick="hide">
				</u-navbar>
				<u--form labelPosition="left" :model="modify_form" ref="modifyForm" labelWidth="140rpx"
					:labelStyle="{fontSize:'28rpx',color:'#000000',fontWeight:'800'}">
					<u-form-item label="班级名称" prop="classesName" borderBottom>
						<u--input v-model="modify_form.classesName" border="none" :clearable="true" :readonly="true" placeholder='请输入班级名称'>
						</u--input>
					</u-form-item>
					<u-form-item label="耗课金额" prop="consumeAmount" borderBottom>
						<u--input v-model="modify_form.consumeAmount" border="none" :clearable="true" placeholder='请输入耗课金额'>
						</u--input>
					</u-form-item>
					<u-form-item label="学生姓名" prop="school" borderBottom>
						<uni-data-checkbox mode="tag" multiple v-model="students" :localdata="studentNames"></uni-data-checkbox>
					</u-form-item>
				</u--form>
				<u-button class="big_btn" text="确认" @click="realConsume">
				</u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		props: {
			classesName: {				
				type: String,
				default: '',
			},
			consume: {				
				type: Number,
				default: null,
			},
			schoolId: {
				type: Number,
				default: null,
			},
			classesId: {
				type: Number,
				default: null,
			},
			show: {				
				type: Boolean,
				default: false,
			}
		},
		watch: {
			show: {
				deep: true, //true为进行深度监听,false为不进行深度监听
				handler(val) {
					if (val) {
						let sys = uni.$u.sys();
						this.height = sys.windowHeight;	
						this.modify_form.classesName = this.classesName;
						this.modify_form.consumeAmount = this.consume;
						this.modify_form.schoolId = this.schoolId;
						this.modify_form.classesId = this.classesId;
						if (this.schoolId && this.classesId) {
							this.getXsList(this.schoolId, this.classesId);
						}
					} else {
						clearInterval(this.interval);
					}
				}
			}
		},
		data() {
			return {
				students: [],
				studentNames: [],
				modify_form: {
					classesName: "",
					consumeAmount: "",
					schoolId: "",
					classesId: ""					
				},
			};
		},
		methods: {
			async getXsList(paramSchoolId, paramClassesId) {
				let res = await this.$u.api.getXsList({
					schoolId: paramSchoolId,
					classesId: paramClassesId
				});
				this.studentNames = [];
				res.data.forEach(item => {
					if (item.remainder>=this.consume) {
						this.studentNames.push({text:item.studentName, value:item.studentId});
					}					
				})
			},
			async realConsume() {
				if (!this.modify_form.classesName) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请输入班级名称",
					});
					return;
				}
				if (this.students.length===0) {
					this.$refs.uToast.show({
						type: "error",
						icon: false,
						title: "失败",
						message: "请选择学生姓名",
					});
					return;
				}
				uni.showLoading({
					title:'加载中...'
				})
				let userId = JSON.parse(uni.getStorageSync('userInfo')).userId
				this.modify_form.students = this.students;
				this.modify_form.teacherId = userId;
				this.$u.api.realConsume({
					...this.modify_form
				})
				.then(c_res => {
					this.$refs.uToast.show({
						type: "success",
						icon: false,
						title: "成功",
						message: c_res.msg
					});
					this.hide();
					uni.hideLoading();
				})
			},
			hide() {
				this.$refs.modifyForm.resetFields();
				this.$emit('hide')
			},
		}
	}
</script>
<style lang="scss" scoped>	
	.popup_content {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		padding: 152rpx 0 0;
		position: relative;
	}
	.tips {
		width: 100%;
		padding: 10rpx 40rpx 20rpx 40rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #C6C8DB;
	}
	.br {
		width: 600rpx;
		height: 1rpx;
		background-color: #e5e5e5;
		position: relative;
		left: calc(50% - 300rpx);
	}
	.big_btn {
		margin-top: 60rpx;
		width: calc(100vw - 80rpx);
		margin-left: 40rpx;
		background: #000000;
		border: 2rpx solid #000000;
		height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		height: 80rpx;
		border-radius: 20rpx;
	}
	/deep/.u-form {
		background-color: #ffffff;
		padding: 0 40rpx;
		color: #fff;
		font-size: 28rpx;
	}
	/deep/ .uni-input-input{
		color: #333 !important;
	}
	/deep/ .uni-input-placeholder {
		color: #cccccc !important;
	}
	/deep/ .u-form-item__body {
		padding: 30rpx 0;
	}
	/deep/ .u-line {		
		border: 0 !important;
	}
</style>
